<template>
  <div id="air"></div>
</template>
<script setup>
import { onMounted} from "vue";
import * as d3 from "d3";

// const treeMap = computed(()=>{
//  return d3.tree().nodeSize([100,100]).separation((a, b) => {
//           let result = a.parent === b.parent && !a.children && !b.children ? 1 : 2;
//           if (result > 1) {
//             let length = 0;
//             length = a.children ? (length + a.children.length) : length;
//             length = b.children ? (length + b.children.length) : length;
//             result = length / 2 + 0.5;
//           }
//           return result;
//         })
// })

onMounted(()=>{
    const width = 1100,
  height = 700;
  const treeMap = d3.tree().size([600, 600])
const svg = d3.select("#air").append("svg")
    .attr("width", width)
    .attr("height", height)
   
    const root = {
  "name": "中国",
  id:0,
  "children": [
    {"name": "北京", id:1},
    {"name": "陕西", id:2,
      "children": [
        {"name": "宝鸡", id:3},
        {"name": "西安", id:4}
      ]
    },
    {"name": "上海", id:5},
    {"name": "浙江",
     id:6,
      "children": [
        {"name": "杭州", id:7},
        {"name": "温州", id:8}
      ]
    },
  ]
}

const dataSet = d3.hierarchy(root)
const nodes = treeMap(dataSet)
console.warn('nodes',nodes);
const node = svg.selectAll('.node')
  .data(nodes.descendants())
  .enter()
  .append('g')
  .attr('class', function(d) {
    return 'node' + (d.children ? ' node--internal' : ' node--leaf');
  })
  .attr('transform', function(d) {
    return 'translate(' + d.x + ',' + d.y + ')';
  })
  .on("click", (d) => {
            d.depth !== 0;//根节点不执行点击事件
 });
      
  node.append('circle')
  .attr('r', 20)
  .attr('fill', () => 'red')

  node.append('text')
  .attr("dy", ".33em")
  .attr("font-size","12px")
  .attr("text-anchor", "middle") // 文字居中
  .attr('fill', '#fff')
  .text( d=>{
    return d.data.name
  } )

svg.selectAll('.link')
  .data(nodes.links())
  .enter()
  .append('path')
  .attr('class', 'link')
  .attr('d', d3.linkVertical() // linkVertical() 垂直  linkHorizontal() 水平
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
  )
  .attr('fill', 'none')
  .attr('stroke', '#ccc')

//   ).enter()
//   .append('g')
//   .attr('class', function(d) {
//     return 'node' + (d.children ? ' node--internal' : ' node--leaf');
//   })
//   .attr('transform', function(d) {
//     return 'translate(' + d.y + ',' + d.x + ')';
//   })
//   .enter()
//   .append('g')
//   .attr('class', function(d) {
//     return 'node' + (d.children ? ' node--internal' : ' node--leaf');
//   })
//   .attr('transform', function(d) {
//     return 'translate(' + d.y + ',' + d.x + ')';
//   })
  
// node.append('circle')
//   .attr('r', 20)
//   .attr('fill', () => 'red')

//   const link = d3.selectAll('.link')
//   .data(nodes.links())
//   .enter()
//   .append('path')
//   .attr('class', 'link')
//   .attr('d', d3.linkHorizontal() // linkVertical() 垂直  linkHorizontal() 水平
//     .x(function(d) { return d.y; })
//     .y(function(d) { return d.x; })
//   )
//   .attr('fill', 'none')
  //.attr('stroke', '#ccc')

//const links = cluster.links(nodes);
    // console.log(nodes,svg );
    // console.log(111,nodes.descendants() );
})

</script>



<style scss>
.node {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

#air{
  width: 1000px;
  height: 800px;
  
}
</style>
